<template>
    <div class="notice_icon" title="消息中心">

        <el-badge :value="messageCountNum" :hidden="messageCountNum <= 0" class="item" @click="checkNoticeList">
            <i class="icon-base icon-base-notice icon_style"></i>
        </el-badge>

        <el-drawer title="消息列表" v-model="drawerShow" 
            direction="rtl" :before-close="handleClose" :size="900"
            :close-on-click-modal="false">
            <!-- append-to-body -->
            <div class="statistics_container">
                <el-row :gutter="24">
                    <el-col :span="6" v-for="(item, index) in statisticsOptions" :key="index" 
                        style="line-height: 24px;margin-bottom: 10px;text-align: center;">
                        <span style="font-size: 14px;">{{ item.label }}</span><br />
                        <span style="color: red;font-weight: 700;font-size: 19px;">{{ item.value }}</span>
                    </el-col>
                </el-row>
            </div>
            <div class="message_list_container">
                <el-tabs v-model="active" class="demo-tabs" @tab-click="tabsChange">
                    <el-tab-pane label="待办事项" :name="0"></el-tab-pane>
                    <el-tab-pane label="消息提醒" :name="1"></el-tab-pane>
                </el-tabs>
                <ul v-loading="loading">
                    <li v-for="item in tableData" :key="item.id" class="message" @click="checkDetail(item)">
                        <div class="flex space-between" style="height: 24px;">
                            <div>
                                <i class="icon-base icon-base-notice"></i>
                                <span class="title">{{ item.title }}</span>
                            </div>
                            <span class="title">{{ formatDate.dateTimeAllFormat( item.createDate ) }}</span>
                        </div>
                        <div class="content">{{ item.content }}</div>
                    </li>
                    <el-empty description="暂无消息记录" v-if="tableData.length <= 0" />
                </ul>
            </div>
        </el-drawer>
        <el-drawer title="详 情" v-model="detailDrawerShow" 
            direction="rtl" :before-close="detailDrawerClose" :size="900"
            :close-on-click-modal="false" append-to-body>
            <iframe :src="`http://192.168.1.46:9243${selectRow.readDataUrl}/${selectRow.readDataId}`" v-if="detailDrawerShow"
                style="width: 100%;height: calc( 100% - 20px );border: medium none;"></iframe>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref, watch, onMounted, onUnmounted } from "vue"
    import { messagePages, messageCount } from "@/api/email.js"
    import { ElNotification } from 'element-plus'
    import { formatDate } from "@/utils/fomart"
    import Stomp from 'stompjs'
    import { useRoute } from "vue-router";
    const route = useRoute();
    const drawerShow = ref(false);
    const detailDrawerShow = ref(false);
    const active = ref(0);
    const loading = ref(false);
    const statisticsOptions = ref([
        { label: '客户合同未签异常', value: '10',},
        { label: '项目合同未签异常', value: '8',},
        { label: '员工合同未签异常', value: '15',},
        { label: '外管证异常', value: '192',},
        { label: '回款异常', value: '0',},
    ]);
    const searchParams = ref({});
    const tableData = ref([]);
    const messageCountNum = ref(0);
    const selectRow = ref({});
    const mqClient = ref(null);
    watch(() => drawerShow.value, () => {
        if(drawerShow.value) {
            getMessageList();
            getMessageCount();
        };
    }, { deep: true });
    const tabsChange = () => {
        getMessageList();
    };
    const checkDetail = (row) => {
        selectRow.value = row;
        detailDrawerShow.value = true;
    };
    const detailDrawerClose = () => {
        detailDrawerShow.value = false;
        getMessageCount();
        getMessageList();
    };
    const checkNoticeList = () => {
        drawerShow.value = true;
    };
    const handleClose = () => {
        drawerShow.value = false;
    };
    const onConnected = (frame) => {
        // console.log("已连接: ",frame);
        //绑定交换机exchange_pushmsg是交换机的名字rk_pushmsg是绑定的路由key
        const exchange = "/exchange/exchange_pushmsg/rk_pushmsg";
        //创建随机队列用上面的路由key绑定交换机,放入收到消息后的回调函数和失败的回调函数
        mqClient.value.subscribe(exchange, responseCallback, onFailed);
    };
    const onFailed = (frame) => {
        // console.log("连接失败: ",frame);
		// console.log("正在尝试重连...");
		connect();
    };
    const responseCallback = (frame) => {
        // console.log("收到消息：" + frame.body);
        ElNotification({
            title: '提醒',
            message: '你有一条新消息',
            type: 'success',
        })
        getMessageList();
		getMessageCount();
        //接收到服务器推送消息，向服务器定义的接收消息routekey路由rk_recivemsg发送确认消息
        // mqClient.value.send("/exchange/exchange_pushmsg/rk_recivemsg", {"content-type":"text/plain"}, frame.body);
    };
    const connect = () => {
        //这里填你rabbitMQ的连接ip地址直接替换localhost:15674就好其它的不用改
        mqClient.value = Stomp.client("ws://106.55.251.250:15674/ws");
        // //填写你rabbitMQ登录的用户名和密码
        const headers = {
            "login": "ddkj",
            "passcode": "Ddkj2020+", 
            "host": "/", //虚拟主机，默认“/”
        };
		mqClient.value.debug = () => {};
        // 创建连接,放入连接成功和失败回调函数
        mqClient.value.connect(headers, onConnected, onFailed);
    };
	const disConnect = () => {
		mqClient.value.disconnect(() => {
			console.log('已断开连接');
		});
	};
    const getMessageCount = () => {
        messageCount().then(res => {
            messageCountNum.value = res.data || 0;
        });
    };
    const getMessageList = () => {
        loading.value = true;
        messagePages({
            doFlg: 'N',
            ...searchParams.value
        }).then(res => {
            tableData.value = res.data.records;
            loading.value = false;
        });
    };
    onMounted(() => {
        getMessageCount();
        connect();
    });
	onUnmounted(() => {
		disConnect();
	});
    defineExpose({getMessageCount});
</script>
<style scoped lang="scss">
    .statistics_container{
        border: 1px solid #dcdcdc;
        padding: 10px 20px 0;
        box-sizing: border-box;
        h2{
            font-size: 17px;
            padding: 10px 0;
        }
    }
    .message_list_container{
        margin-top: 10px;
        .message{
            border-bottom: 1px solid #eee;
            .title{margin-left: 8px;font-size: 15px;}
            .content{ height: 44px; font-size: 14px;margin-left: 24px; }
        }
    }
    :deep(.right-menu){
        line-height: 30px;
    }
    :deep(.el-drawer__header){
        margin-bottom: 0;
        padding: 10px 20px;
    }
    :deep(.el-drawer__body){
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 18px;
    }
    :deep(.el-badge__content.is-fixed){
        top: 20px;
    }
    .notice_icon{
        margin-right: 16px;
        margin-top: -1px;
        cursor: pointer;
    }
    .icon_style{
        font-size: 20px;
    }
</style>